<template>
    <el-dialog
      :visible.sync="showDialog"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :center="true"
      :custom-class="rule-select"
      v-no-header
      >
      <div class="text-center" style="padding-top: 15px;">
        <p class="user-title">{{$t('identity.identify')}}</p>
        <p class="tip">{{$t('identity.server')}}</p>
        <div class="flex flex-space-around">
          <div  v-for="role in roles" :key="role.id" @click.stop="roleItemClick(role)">
            <div class="role" :class="role.bgAttr"></div>
            <div style="margin-top: 16px">{{role.text}}</div>
          </div>
        </div>
        <div class="mt40">
          <el-button style="width: 120px" type="primary" @click="handlerOkCLick">{{$t('common.btn.confirm')}}</el-button>
        </div>
        <div class="mt20">
           <el-checkbox v-model="checked" ><span style="font-size: 12px">{{$t('identity.setDefault')}}</span></el-checkbox>
        </div>
      </div>
    </el-dialog>
</template>
<script>
import bus from 'common/src/utils/bus';
import {toggleCurrentUserRole} from 'common/src/api/session'
export default {
  inject: ['reload'],
    mounted() {
      let currentRole = this.roles.find(item => item.id === this.currentRoleId);
      if (currentRole) {
        currentRole.bgAttr = currentRole.activeBgAttr;
      }
    },
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        flag: {
          type: Number,
          default: 2
        },
        currentRoleId: {
          type: String,
          default: ''
        }
    },
    directives: {
      noHeader: {
        bind: function(el,binding, vnode) {
           let dialog = el.firstChild;
           dialog.removeChild(dialog.children[0]);
        }
      }
    },
    data(){
      return {
        roles: [
          {
            defaultBgAttr: 'manage',
            bgAttr: 'manage',
            activeBgAttr: 'manage-avtive',
            text: this.$t('identity.manager'),
            id: "1"
          },{
            defaultBgAttr: 'teacher',
            bgAttr: 'teacher',
            activeBgAttr: 'teacher-avtive',
            text: this.$t('identity.teacher'),
            id: "2"
          },
        ],
        currentRoleId: ''
      }
    },
    methods:{
      roleItemClick(role) {
        this.currentRoleId = role.id;
        this.roles.forEach(item => item.bgAttr = item.defaultBgAttr);
        role.bgAttr = role.activeBgAttr
      },
      handlerOkCLick() {
        let role = this.roles.find(item => item.id === this.currentRoleId);
        if (!role) {
          return this.$message({
            type: 'error',
            message: this.$t('identity.selectRule')
          })
        }
        toggleCurrentUserRole({currentRole:this.currentRoleId,flag: this.flag}).then(res => {       
            if(res.code === 200) {
              this.$emit('closeDialog', {
                currentRoleId: this.currentRoleId,
                flag: this.flag
              });
              bus.$emit('updateCurrentRole', this.currentRoleId);
              this.$store.commit("set_session_data", res.data);
              this.showDialog = false;
              this.reload();
            } else {
              this.$message({
                type: 'error',
                message: this.$t('identity.failSelectRule')
              });
              this.$emit('closeDialog');
              this.showDialog = false
            }
        }, () => {
           this.$message({
              type: 'error',
              message: this.$t('identity.failSelectRule')
            });
            this.$emit('closeDialog');
            this.showDialog = false
        })
          
      }
    },
    computed: {
      checked: {
        get() {
          return this.flag === 1;
        },
        set(value) {
          if (value) {
            this.flag = 1;
          } else {
            this.flag = 2;
          }
        }
      }
    }
}
</script>
<style scoped>
  .text-center{
    text-align: center;
  }
  .flex{
    display: flex;
  }
  .flex.flex-space-around{
    justify-content: space-around
  }
 
  .active{
    border: 2px solid red;
  }
  .normal{
    border: 2px solid black;
  }
  .user-title{
    font-family: PingFangSC-Medium;
    font-size: 22px;
    color: #2B3B4E;
    letter-spacing: 0;
    line-height: 22px;
    height: 22px;
    margin-bottom: 12px
  }
  .tip{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #4C5C70;
    letter-spacing: 0;
    line-height: 12px;
    height: 12px;
    margin: 0 auto 40px;

  }
  .mt40{
    margin-top: 40px;
  }
  .mt20{
    margin-top: 20px;
  }
  .el-dialog .el-dialog__header {
    border-bottom: none;
  }
  .role{
    height: 88px;
    width: 88px;
    background-size: cover;
  }
  .manage{
    background-image: url(/static/images/manage.png)
  }
  .manage-avtive{
     background-image: url(/static/images/manage-active.png)
  }
  .teacher{
    background-image: url(/static/images/teacher.png)
  }
  .teacher-avtive{
    background-image: url(/static/images/teacher-active.png)
  }
</style>
